<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优惠券用户登录</title>
    <link rel="stylesheet" href="css/CouponAdminLogin.css">
    </link>
</head>

<body>
    <div id="app">
        <img src="../CouponAdmin/img/register_logo.png" class="logo">
        <div class="header">
            <img src="../CouponAdmin/img/背景图.jpg">
            <div class="login">
                <!-- <a class="revoke" href=""></a> -->
                <div class="flex_wrap">
                    <div id="div_bot_lint" class="flex flex_between padding">
                        <div class="form_header" @click="checkLoginWay2()">
                            <a href="javascript:void(0)" class="font_green">账户密码登录</a>
                        </div>
                        <div class="font_line"></div>
                        <div class="form_header" @click="checkLoginWay()">
                            <a href="javascript:void(0)" class="font_black">手机验证码登录</a>
                        </div>
                    </div>
                </div>
                <div class="telnoLogin">
                    <div class="adminlogin" v-if="isShowLoginWay">
                        <span>账 号 ：</span>
                        <el-input type="text" v-model="username" placeholder="请输入你的用户名" class="text">

                        </el-input>
                        <span>密 码 ：</span>
                        <el-input type="text" placeholder="请输入密码" v-model="password" show-password class="text">
                        </el-input>

                        <el-checkbox v-model="isRemember" style="top:40px;" class="autlogin">一周内自动登录</el-checkbox>
                        <a href="../CouponAdmin/CouponAdminRegister.html" class="toregister">立即去注册</a>
                        <el-button type="success" class="loginBtn" @click="submit">登录</el-button>
                        <el-checkbox v-model="isAgree" style="top:40px;" class="agree">同意用户协议和隐私政策</el-checkbox>

                    </div>

                    <div class="adminlogin" v-if="!isShowLoginWay">
                        <div class="checking">
                            <span>手机号 ：</span>
                            <el-input type="text" v-model="userTelno" placeholder="请输入你的手机号" class="text">

                            </el-input>
                            <span>验证码 ：</span>
                            <el-input type="text" placeholder="请输入验证码" v-model="code" class="code"></el-input>
                            <!-- <el-button class="codeBtn" @click="submitcode" :disabled="isSend">{{codeName}}</el-button> -->
                            <el-button class="codeBtn" @click="submitcode"><span class="codename">{{codeName}}</span>
                            </el-button>
                        </div>

                        <el-checkbox v-model="isRemember" style="top:40px;" class="autlogin">一周内自动登录</el-checkbox>
                        <a href="../CouponAdmin/CouponAdminRegister.html" class="toregister">立即去注册</a>
                        <el-button type="success" class="loginBtn" @click="submit">登录</el-button>
                        <el-checkbox v-model="isAgree" style="top:40px;" class="agree">同意用户协议和隐私政策</el-checkbox>
                    </div>


                </div>

            </div>

        </div>


    </div>
    <!--引用vue.js文件-->
    <script src="../CouponAdmin/util/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引用axius异步请求封装-->
    <script src="../CouponAdmin/util/axios-0.18.0.js"></script>
    <!--引用element-ui-->
    <script src="../CouponAdmin/util/index.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {

                    username: '', //账号
                    password: '', //密码
                    userTelno: '', //手机号
                    code: '', //验证码
                    isRemember: false, //一周内是否自动登录
                    isAgree: false, //是否接收协议
                    isShowLoginWay: true, // 是否展示手机验证码登录
                    codeName: '发送验证码', //获取验证码的字段 例如  发送验证码，重新发送 倒计时
                    isSend: false, //禁用
                    totalTime: 60, //倒计时1分钟
                    timer: '' //定时器
                }
            },
            methods: {
                // 检查登录方式
                checkLoginWay() {
                    var that = this
                    that.isShowLoginWay = false
                    // if(that.isShowLoginWay) that.isShowLoginWay=false
                    // else that.isShowLoginWay=true
                },

                checkLoginWay2() {
                    var that = this
                    that.isShowLoginWay = true
                },

                submit() {

                    // 是否记住密码
                    // 判断复选框是否被勾选 勾选则调用配置cookie方法
                    if (this.isRemember == true) {
                        //传入账号名，密码，和保存天数3个参数
                        this.setCookie(this.username, this.password, 7);
                    } else {

                        console.log("清空Cookie");
                        //清空Cookie
                        this.clearCookie();




                    }
                    // debugger
                    // 手机验证码登录
                    if (!this.isShowLoginWay) {
                        // if(this.isEmpty(this.userTelno)){
                        if (this.userTelno == '') {
                            alert("手机号不能为空！");
                            console.log("手机号不能为空！")
                            return
                        }
                        // if(this.isEmpty(this.code)){
                        if (this.code == '') {
                            alert("验证码不能为空！");
                            return
                        }
                        if (!this.isAgree) {
                            alert("请勾选协议！");
                            return
                        }
                        // 验证码登录
                        this.loginByPhoneCode();

                    } else { //用户名登录
                        // if(this.isEmpty(this.username)){
                        if (this.username == '') {
                            alert("用户名不能为空！");
                            console.log("用户名不能为空")
                            return
                        }
                        // if(this.isEmpty(this.password)){
                        if (this.password == '') {
                            alert("密码不能为空！");
                            return
                        }
                        if (!this.isAgree) {
                            alert("请勾选协议！");
                            return
                        }
                        // 登录
                        this.login();

                    }




                },

                // 登录
                login() {
                    var that = this
                    var userInfo = {
                        userAdmin: that.username,
                        userId: 0,
                        userPwd: that.password,
                        token: '',
                        userTelno: that.userTelno,
                        isRemmber: that.isRemmber,

                    }
                    axios({
                        method: "post",
                        url: "http://localhost:8080/couponAdmin/loginCouponAdmin",
                        data: userInfo
                    }).then(function (resp) {
                        // console.log(resp);

                        // 将用户的信息存入到前端缓存中
                        var user = String(resp.data.data.userAdmin)
                        window.localStorage.clear();
                        //将对象转换成Json的格式
                        window.localStorage.setItem(user, JSON.stringify(resp.data.data))
                        // 打印
                        // console.log(JSON.parse(window.localStorage.getItem(user)))
                        // 跳转
                        window.location.href = "../coupon.html?userAdmin" + user

                    })

                },
                
                // 手机验证码登录
                loginByPhoneCode() {
                    var that = this
                    var userTelno = that.userTelno
                    var code = that.code
                    axios({
                        method: "post",
                        url: "http://localhost:8080/couponAdmin/phoneByCode" + "?userTelno=" +
                            userTelno + "&&code=" + code
                        // url:"http://localhost:8081/Register",
                        //    data: cust
                    }).then(function (resp) {
                        console.log(resp);
                        // 将用户的信息存入到前端缓存中
                        var user = String(resp.data.userAdmin)
                        //清空
                        window.localStorage.clear
                        //将对象转换成Json的格式
                        window.localStorage.setItem(user, JSON.stringify(resp.data.data))

                        // 打印
                        console.log(window.localStorage.getItem(user))

                        // 跳转
                        window.location.href = "../coupon.html?userAdmin" + user

                    })

                },

                // 获取验证码
                submitcode() {
                    var that = this
                    var userTelno = that.userTelno
                    // 验证码按钮倒计时
                    if (this.isSend) return
                    this.isSend = true
                    this.codeName = this.totalTime + 's后重新发送'
                    this.timer = setInterval(() => { //使用的是箭头函数  当前的这个定时器，要去触发函数    
                        // setInterval()该方法能每隔一段时间调用某个方法 
                        // setTimeout() 方法将在以毫秒为单位指定的时间后调用函数
                        //如果需要多次调用可以使用setInterval()
                        this.totalTime--
                        this.codeName = this.totalTime + 's后重新发送'
                        if (this.totalTime < 0) {
                            clearInterval(this.timer)
                            this.codeName = '重新发送验证码'
                            this.totalTime = 60
                            this.isSend = false
                        }
                    }, 1000)

                    axios({
                        method: "post",
                        url: "http://localhost:8080/couponAdmin/sendMessage" + "?userTelno=" + userTelno
                    }).then(function (resp) {
                        that.code = resp.data.data
                        console.log(resp.data.data);
                    })
                },


                // 设置cookie 将用户名，密码，以及保存的天数，以及记住密码的check按钮的布尔值存入cookie
                // 设置cookie
                setCookie(c_name, c_pwd, exdays, flg) {
                    var exdate = new Date(); //获取当前时间
                    exdate.setTime(exdate.getTime() + 24 * 60 * 1000 * 60 * exdate * 7); //设置保存的天数  7天
                    // 将字符串拼接
                    console.log("cookie中的数据 ：" + window.document.cookie, "用户名为 ：" + c_name, "密码为 ：" + c_pwd)
                    window.document.cookie =
                        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                    window.document.cookie =
                        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
                    window.document.cookie = "checked" + "=" + flg + ";path=/;expires=" +
                        exdate.toGMTString();
                },
                // 读取cookie 通过document.cookie来获取保存的cookie
                getCookie() {
                    if (document.cookie.length > 0) {
                        var arr = document.cookie.split(";")
                        for (var i = 0; i < arr.length; i++) {
                            var arr2 = arr[i].split("="); //再次切割
                            console.log(arr[0]);
                            // 判断查找相对应的值
                            if (arr2[0] == "username") {
                                this.custName = arr2[1]; //获取用户名到登录页面
                            } else if (arr2[0] == "password") {
                                this.custPwd = arr2[1]; //获取用户名到登录页面                 
                            } else if (arr2[0] == "checked") {
                                if (arr2[1] == "true") {
                                    this.checked = true; //获取记住密码check值到登录页面
                                } else {
                                    this.checked = false;
                                }
                                console.log(this.checked);
                            }
                        }
                    }

                },

                //清除cookie
                clearCookie: function () {
                    this.setCookie("", "", -1, false); //修改其他值都为空，天数为负1天
                },

            },
            mounted() {
                this.isShowLoginWay = true
            },
        })
    </script>
</body>

</html>